<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">日志管理</h3>
				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							   class="form-control pull-right" placeholder="用户名">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
								<i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-delete">删除</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<table class="table table-hover">
					<thead>
					<tr>
						<th><input type="checkbox" id="checkAll">全选</th>
						<th>用户名</th>
						<th>操作</th>
						<th>请求方法</th>
						<th>请求参数</th>
						<th>IP</th>
						<th>执行时长</th>
					</tr>
					</thead>
					<tbody id="tbodyId">
					<tr>
						<td colspan="7">数据正在加载中...</td>
					</tr>
					</tbody>
				</table>
			</div>
			<div id="pageId" class="box-footer clearfix" dm="100">

			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">
	$(function(){
		$("#pageId").load("doPageUI",doGetObjects);

		$(".input-group-btn").on( "click" , ".btn-search",doGetObjects)
				.on("click",".btn-delete",doDeleteObjects);
		$("#checkAll").change(doChangeTbodyCheckboxState);
		//$(".cBox").change(doChangeTheadCheckboxState);
		$("#tbodyId").on("change",".cBox",doChangeTheadCheckboxState);

	});

	function doChangeTheadCheckboxState(){
		alert("==============");
		let flag = true;
		$("#tbodyId input:checkbox").each(function (){
			flag = flag&& $(this).prop("checked");
		});

		$("#checkAll").prop("checked",flag);

	}


	function doChangeTbodyCheckboxState(){
		let flag = $(this).prop("checked");
		$("#tbodyId input:checkbox").prop("checked",flag);
	}




	function doDeleteObjects(){

		//1.获取选中的id值
		var ids=doGetCheckedIds();
		if(!confirm("您确定删除吗？"))return;
		if(ids.length==0){
			alert("至少选择一个");
			return;
		}
		//2.发异步请求执行删除操作
		const url=`log/doDeleteObjects/${idArrays.toString()}`;
		/*var params={"ids":ids.toString()};
		console.log(params);*/
		/*$.post(url,params,function(result){
			if(result.state==1){
				alert(result.message);
				//doGetObjects();
				doRefreshAfterDeleteOk();

			}else{
				alert(result.message);
			}
		});*/

		let ajax=$.ajax({
			type:"delete",//请求方式为delete方式
			url:url
		});
		ajax.done(function(result){//success
			if(result.state==1){
				alert(result.message);
				doRefreshAfterDeleteOk();
			}else{
				alert(result.message);
			}
		})



	}

	function doRefreshAfterDeleteOk(){
		let pageCurrent=$("#pageId").data("pageCurrent");
		let pageCount=$("pageId").data("pageCount");
		let state =$("#checkAll").prop("checked");

		//2.基于条件修改当前页码值
		if(state&&pageCurrent>1&&pageCurrent==pageCount){
			pageCurrent--;
			$("#pageId").data("pageCurrent",pageCurrent);
		}
		//3.重新执行查询
		doGetObjects();

	}





	function doGetCheckedIds(){
		//定义一个数组,用于存储选中的checkbox的id值
		var array=[];//new Array();
		//获取tbody中所有类型为checkbox的input元素
		$("#tbodyId input[type=checkbox]").
				//迭代这些元素，每发现一个元素都会执行如下回调函数
				each(function(){
					//假如此元素的checked属性的值为true
					if($(this).prop("checked")){
						//调用数组对象的push方法将选中对象的值存储到数组
						array.push($(this).val());
					}
				});
		return array;
	}





	function doQueryObjects(){

		$("#pageId").data("pageCurrent",1);
		doGetObjects();
	}

	function doGetObjects(){

		$("#checkAll").prop("checked",false);

		const url = "log/doFindPageObjects";
		let pageCurrent=$("#pageId").data("pageCurrent");

		let username =$("#searchNameId").val();
		if(!pageCurrent)pageCurrent=1;
		//console.log(username+"========")
		let params = { "pageCurrent" : pageCurrent , "username" : username};
		$.getJSON(url,params,doHandleResponseResult);
	}


	function doHandleResponseResult(result){
		console.log(result);
		if(result.state==1){//ok
			//更新table中tbody内部的数据
			doSetTableBodyRows(result.data.records);//将数据呈现在页面上
			//更新页面page.html分页数据
			doSetPagination(result.data); //此方法写到page.html中
		}else{
			alert(result.message);
		}
	}
	//第四步：将异步响应结果呈现在table的tbody位置。代码参考如下：
	function doSetTableBodyRows(records){
		//1.获取tbody对象，并清空对象
		var tBody=$("#tbodyId");
		tBody.empty();
		//2.迭代records记录，并将其内容追加到tbody
		records.forEach(item=>{
			tBody.append(doCreateRow(item));
		})
	}

	function doCreateRow(item){
		return `<tr>
					<td><input type="checkbox" class="cBox" value="${item.id}"></td>
					<td>${item.username}</td>
					<td>${item.operation}</td>
					<td>${item.method}</td>
					<td>${item.params}</td>
					<td>${item.ip}</td>
					<td>${item.time}</td>
				</tr>` ;
	}
</script>